<template>
  <div
    class="super_brand_warp"
    :style="{ backgroundColor: baseInfo.bgColor }"
    :class="{ pt60: NavTabdata.length > 0 }"
  >
    <!-- 顶部tab -->
    <div v-if="NavTabdata.length > 0">
      <nav-tab
        :tabList="NavTabdata"
        :current="currentTab"
        @tabClick="JumpTargetUrl"
      ></nav-tab>
    </div>
    <div v-if="baseInfo.kvImg" class="kvImg_countDown">
      <!-- KV图 -->
      <img class="kvImg" :src="baseInfo.kvImg" alt="" />
      <img
        v-if="showStrategyBtn"
        class="Strategy"
        src="@/assets/superBrand/Strategy.png"
        @click="goStrategy"
      />
      <!-- 倒计时 -->
      <div v-if="baseInfo.countDownFlag == 1" class="count_down_warp">
        <div class="content">
          <p>{{ baseInfo.showCountDown ? '距922活动结束仅' : '活动已结束' }}</p>
          <count-down
            :visible.sync="baseInfo.showCountDown"
            :time="baseInfo.endingTime"
          ></count-down>
        </div>
      </div>
    </div>
    <!--遍历 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text=" "
      @load="onLoad"
    >
      <div class="warp">
        <div
          v-for="(floorItem, floorIndex) in floorList"
          :key="floorIndex"
          class="item"
        >
          <mtitle
            v-if="floorItem.floorImg"
            :titleData="floorItem"
            :buttonColor="baseInfo.bottomColor"
            @moreClick="JumpTargetUrl"
          />
          <!-- 优惠券 -->
          <template v-if="floorItem.type == 4">
            <div
              v-if="floorItem.hotSaleSp.spCardDetailList"
              class="coupons"
              :style="{ backgroundColor: floorItem.hotSaleSp.bgColor }"
              :class="{ 'super_brand——mt10': floorItem.hotSaleSp.bgColor }"
            >
              <coupons
                v-for="(it, ind) in floorItem.hotSaleSp.spCardDetailList"
                :key="ind"
                :couponsIndex="floorIndex"
                :couponArr="it"
                :couponBgColor="floorItem.hotSaleSp.bgColor"
                :resId="floorItem.id"
                :hotSaleId="hotSaleId"
                :hotSaleName="hotSaleName"
                @grabbingCoupon="grabbingCoupon"
              />
            </div>
          </template>
          <!-- 资源位 -->
          <template v-if="floorItem.type == 5">
            <div v-if="floorItem.hotSaleResourceRes.resourceDetail">
              <resources
                v-for="(value, key) in floorItem.hotSaleResourceRes
                  .resourceDetail"
                :key="key"
                :resourcesArr="value"
                @resourceClick="JumpTargetUrl"
              />
            </div>
          </template>
          <!-- branner -->
          <template v-if="floorItem.type == 2">
            <branner
              :bannerList="floorItem.hotSaleBannerList"
              @bannerChange="JumpTargetUrl"
            />
          </template>
          <!-- 秒杀 -->
          <template v-if="floorItem.type == 6">
            <div class="seckill">
              <seckill
                :seckilltabList="
                  floorItem.hotSaleCampaign.hotSaleCampaignTabList
                "
                :seckill-data="floorItem.seckillBaseInfo"
                :currentFloorIndex="floorIndex"
                :resId="floorItem.id"
                :buttonColor="baseInfo.bottomColor"
                @changeTab="changeTabHandler"
                @loadMore="loadMoreHandler"
                @goProductDetail="goProductDetail"
              />
            </div>
          </template>
          <!-- 爆款 -->
          <template v-if="floorItem.type == 9">
            <hot-popular
              :hotSaleHighPopular="floorItem.hotSaleHighPopular"
              :floorName="floorItem.name"
              :floorIndex="floorIndex"
              :hotSaleId="hotSaleId"
              :hotSaleName="hotSaleName"
              :resId="floorItem.id"
            />
          </template>
          <!-- 直播 -->
          <!-- <template v-if="floorItem.type == 3">
            <live-floor
              :hotSaleLive="floorItem.hotSaleLive"
              :floorName="floorItem.name"
              :floorIndex="floorIndex"
              :hotSaleId="hotSaleId"
              :hotSaleName="hotSaleName"
              :resId="floorItem.id"
            />
          </template>-->
          <!-- 频道 -->
          <template v-if="floorItem.type == 7">
            <div
              v-if="channelList.length > 0"
              id="channel-container"
              :class="{ pt40: channelNavFixed && !isVerticalNav }"
            >
              <!-- 水平方向频道导航 -->
              <div
                v-if="!isVerticalNav"
                :class="{ 'channel-nav-fixed': channelNavFixed }"
              >
                <van-tabs
                  v-model="activeIndex"
                  class="super-brand-channel-tab"
                  :line-width="20"
                  @click="handleChannelTab"
                >
                  <van-tab
                    v-for="item in channelList"
                    :key="item.id"
                    :title="item.name"
                  ></van-tab>
                </van-tabs>
              </div>
              <div class="channel-content-wrap">
                <div
                  v-if="isVerticalNav"
                  class="slide-menu-container"
                  :class="{ 'channel-nav-slide-fixed': channelNavFixed }"
                >
                  <slideNav
                    :list="channelList"
                    :curActiveIndex="curTabIndex"
                    @changeNavTab="handleChannelTab"
                  />
                </div>
                <div
                  v-show="isVerticalNav && channelNavFixed"
                  class="channel-slide-w"
                ></div>
                <div class="channel-list-wrap">
                  <div
                    v-for="(value, tabIndex) in channelList"
                    :key="tabIndex"
                    ref="channelSectionRef"
                    :style="{
                      minHeight:
                        listMap[value.id].list.length === 0 ? '800px' : 'auto'
                    }"
                  >
                    <div class="channel-title">
                      <img v-if="value.imgUrl" :src="value.imgUrl" />
                      <p v-else>{{ value.name }}</p>
                    </div>
                    <template v-if="value.channelType === 1">
                      <activity
                        v-for="(item, index) in listMap[value.id].list"
                        :key="index"
                        :activityObj="item"
                        :index="index"
                        :hotSaleId="hotSaleId"
                        :hotSaleName="hotSaleName"
                        :isVerticalNav="isVerticalNav"
                        :tabName="value.name"
                        :fromPage="'commonActivity'"
                      />
                    </template>
                    <template
                      v-else-if="
                        value.channelType === 2 && value.showType === 1
                      "
                    >
                      <product-one-col
                        v-for="(item, index) in listMap[value.id].list"
                        :key="index"
                        :product="item"
                        :isVerticalNav="isVerticalNav"
                      />
                    </template>
                    <template
                      v-else-if="
                        value.channelType === 2 && value.showType === 2
                      "
                    >
                      <div class="channel-list-content">
                        <product-two-col
                          v-for="(item, index) in listMap[value.id].list"
                          :key="index"
                          :product="item"
                          :isVerticalNav="isVerticalNav"
                        />
                        <product-empty-col
                          v-if="
                            !listMap[value.id].hasNext &&
                              listMap[value.id].list.length % 2 !== 0
                          "
                          :isVerticalNav="isVerticalNav"
                        />
                      </div>
                    </template>
                    <div
                      v-if="
                        listMap[value.id].hasNext &&
                          listMap[value.id].list.length > 0
                      "
                      class="channel-more"
                    >
                      <div
                        class="btn"
                        :style="{
                          borderColor: baseInfo.bottomColor,
                          color: baseInfo.bottomColor
                        }"
                        @click.stop="
                          loadMore(
                            listMap[value.id],
                            value.id,
                            floorItem.name,
                            floorIndex
                          )
                        "
                      >
                        查看更多
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </van-list>
    <div v-if="isPageLoading" class="loading">
      <div class="loading-content"></div>
    </div>
  </div>
</template>
<script>
import navTab from './components/navTab.vue';
import coupons from './components/coupons.vue';
import productOneCol from './components/productOneCol.vue';
import productTwoCol from './components/productTwoCol.vue';
import productEmptyCol from './components/productEmptyCol.vue';
import slideNav from './components/slideNav.vue';
import activity from './components/activity.vue';
import countDown from './components/countDown.vue';
import seckill from './components/seckill.vue';
import Mtitle from './components/title.vue';
// import liveFloor from './components/liveFloor.vue';
import hotPopular from './components/hotPopular.vue';
import branner from './components/branner.vue';
import resources from './components/resources.vue';
import { floorData1, getSuperBrandInfo } from './json/superBrand-1769';
import {
  http2https,
  goLink,
  getUrlParam,
  getCurPageClientHeight
} from '@/utils/util';

// eslint-disable-next-line no-unused-vars
let isFreshPage = false;

// const isElementInViewport = (el, offset = 0) => {
//   const box = el.getBoundingClientRect();
//   const top = box.top
//     < (window.innerHeight || document.documentElement.clientHeight) + offset;
//   const bottom = box.bottom > 0;
//   return top && bottom;
// };

export default {
  name: 'superbrand',
  components: {
    navTab,
    productOneCol,
    productTwoCol,
    slideNav,
    coupons,
    resources,
    activity,
    productEmptyCol,
    countDown,
    seckill,
    Mtitle,
    // liveFloor,
    hotPopular,
    branner
  },
  data() {
    return {
      hotSaleName: '', // 会场名
      hotSaleId: '', // 会场id

      floorList: [],
      floorIdArr: [],
      floorIndex: 0,

      baseInfo: {
        kvImg: '', // 主KV
        bgColor: '', // 背景色
        bottomColor: '', // 加载更多配置颜色
        showCountDown: true,
        endingTime: '00:00:00',
        countDownFlag: 0,
        ruleDescB: '',
        ruleDescC: ''
      },

      NavTabdata: [], // 顶部tab 数组
      couponArr: [], // 优惠券 数组
      couponBgColor: '', // 优惠券背景色

      seckillTabId: 0,
      seckillFloorIndex: 0,
      seckillPageNum: 0,

      pageSize: 8, // 频道下商品默认一页加载条数
      listMap: {}, // 频道下商品数据
      channelList: [], // 频道列表
      curTabIndex: 0, // 记录当前频道激活的下标
      activeIndex: 0, // 频道tab激活的下标
      channelNavShowType: null, // 频道导航栏方向 1:常规 2:左侧
      channelNavFixed: false, // 频道导航栏是否吸顶

      currentTab: 0,
      notData: false,
      isPageLoading: true,

      loading: false,
      finished: false,
      topValue: 0, // 记录页面滚动top值
      clientHeight: getCurPageClientHeight() // 可视区的高度
    };
  },
  computed: {
    isVerticalNav() {
      return this.channelNavShowType == 2;
    },
    curTabName() {
      const channelData =
        this.channelList.length > 0 ? this.channelList[this.curTabIndex] : {};
      return channelData.name || '';
    },
    showStrategyBtn() {
      return this.baseInfo.ruleDescB || this.baseInfo.ruleDescC;
    }
  },
  created() {},
  mounted() {},
  activated() {
    console.log('activated===');
    // const { hotSaleId } = getUrlParam();
    // if (!hotSaleId) {
    //   this.$toast('会场id不能为空');
    //   return;
    // }
    window.addEventListener('scroll', this.handleScroll);
    // if (hotSaleId !== this.hotSaleId || isFreshPage) {
    //   this.getData(hotSaleId);
    // }
    this.getData();
  },
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate===', to, from);
    const { hotSaleId } = to.query || {};
    if (hotSaleId !== this.hotSaleId) {
      this.getData(hotSaleId);
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    // console.log('beforeRouteEnter===', to, from);
    // if (from.name === 'index') {
    //   isFreshPage = true;
    // }
    next();
  },
  methods: {
    goStrategy() {
      // todo
    },
    // 活动模块切换tab
    changeTabHandler(tab, floorId, floorIndex) {
      this.seckillTabId = tab.id;
      this.seckillFloorIndex = floorIndex;
      this.currenSeckillPageNum = tab.pageNum + 1;
      this.getDataInFloor({
        floorList: [floorId],
        hotSaleFloorId: floorId,
        activityTabIdList: [tab.id],
        pageIndex: tab.pageNum + 1
        // pageSize: this.pageSize
      });
    },
    // 活动模块加载更多
    loadMoreHandler(tab, floorId, floorIndex) {
      this.seckillTabId = tab.id;
      this.seckillFloorIndex = floorIndex;
      this.currenSeckillPageNum = tab.pageNum + 1;
      this.getDataInFloor({
        floorList: [floorId],
        hotSaleFloorId: floorId,
        activityTabIdList: [tab.id],
        pageIndex: tab.pageNum + 1
        // pageSize: this.pageSize
      });
    },
    init() {
      this.listMap = {};
      this.channelList = [];
      this.curTabIndex = 0;
      this.activeIndex = 0;
      this.channelNavShowType = null;
      this.channelNavFixed = false;

      this.NavTabdata = [];
      this.couponArr = [];
      this.notData = false;
      this.isPageLoading = true;
      this.loading = false;
      this.finished = false;

      this.floorList = [];
      this.floorIdArr = [];
      this.floorIndex = 0;

      this.seckillTabId = 0;
      this.seckillFloorIndex = 0;
      this.seckillPageNum = 0;
      this.topValue = 0;
    },
    getData(hotSaleId) {
      isFreshPage = false;
      window.scrollTo(0, 0);
      this.init();
      this.hotSaleId = hotSaleId;
      this.getSuperBrandData();
    },
    setPageTitle() {
      if (this.hotSaleName) {
        window.document.title =
          this.hotSaleName.length > 8
            ? `${this.hotSaleName.slice(0, 8)}...`
            : this.hotSaleName;
      }
    },
    handleScroll() {
      const channelContainerDOM = document.getElementById('channel-container');
      if (channelContainerDOM) {
        const rect = channelContainerDOM.getBoundingClientRect();
        this.channelNavFixed = rect.top <= 0 && rect.bottom > 100;
        const isInViewport = rect.top < this.clientHeight && rect.bottom > 0;
        // 频道楼层在可视区域，进行锚点处理
        if (isInViewport) {
          // isElementInViewport(channelContainerDOM)
          this.handleAnchorPoint();
        }
      }
    },
    // 内容滚动频道导航跟随处理
    handleAnchorPoint() {
      if (this.$refs.channelSectionRef) {
        // 所有锚点元素的 offsetTop
        const offsetTopArr = [];
        if (this.$refs.channelSectionRef) {
          this.$refs.channelSectionRef.forEach(item => {
            offsetTopArr.push(item.offsetTop);
          });
        }
        // 获取当前文档流的 scrollTop
        const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // 定义当前点亮的导航下标
        let navIndex = 0;
        for (let i = 0; i < offsetTopArr.length; i++) {
          // 如果 scrollTop 大于等于第i个元素的 offsetTop 则说明 i-1 的内容已经完全不可见
          // 那么此时导航索引就应该是i了
          if (scrollTop >= offsetTopArr[i] - 50) {
            navIndex = i;
          }
        }
        this.activeIndex = navIndex;
        this.curTabIndex = navIndex;
        let flag = false;
        const curBoxRect = this.$refs.channelSectionRef[
          navIndex
        ].getBoundingClientRect();
        // 判断滚动方向，做滚动加载处理逻辑
        if (scrollTop <= this.topValue) {
          // 向上滚动
          // console.log('===up==', curBoxRect.top);
          flag = curBoxRect.top > -100;
          navIndex = navIndex === 0 ? navIndex : navIndex - 1;
        } else {
          // 向下滚动
          // console.log('===down==', curBoxRect.bottom);
          flag = curBoxRect.bottom - this.clientHeight < 180;
          navIndex =
            navIndex === this.channelList.length - 1 ? navIndex : navIndex + 1;
        }
        const channelData = this.channelList[navIndex];
        const { floorId, id } = channelData;
        if (
          this.listMap[id].list.length === 0 &&
          !this.listMap[id].scrollLoading &&
          flag
        ) {
          this.listMap[id].scrollLoading = true;
          // 请求数据
          this.getDataInFloor({
            floorList: [floorId],
            channelDetailIdList: [id],
            pageIndex: 1,
            pageSize: this.pageSize,
            isScroll: true
          });
        }
        setTimeout(() => {
          this.topValue = scrollTop;
        }, 0);
      }
    },
    handleChannelTab(index, tabName) {
      console.log('tabName==', tabName);
      if (index === this.curTabIndex) return;
      const channelData = this.channelList[index];
      const floorList = [channelData.floorId];
      const { id } = channelData;
      if (!this.channelNavFixed) {
        this.scrollToTab();
      }
      this.curTabIndex = index;
      this.activeIndex = index;
      if (this.listMap[id].list.length > 0) {
        // 锚点到指定位置
        // console.log('tabName==', this.$refs.channelSectionRef);
        const scrollH = this.isVerticalNav ? 0 : 40;
        window.scrollTo(
          0,
          this.$refs.channelSectionRef[index].offsetTop - scrollH + 3
        );
      } else {
        const idArr = [];
        // 点击最后一个
        if (index === this.channelList.length - 1) {
          const prevId = this.channelList[index - 1].id;
          if (this.listMap[prevId].list.length === 0) {
            idArr.push(prevId);
          }
          idArr.push(id);
        } else if (index > 0) {
          // 点击中间的一个
          const prevId = this.channelList[index - 1].id;
          const nextId = this.channelList[index + 1].id;
          if (this.listMap[prevId].list.length === 0) {
            idArr.push(prevId);
          }
          idArr.push(id);
          if (this.listMap[nextId].list.length === 0) {
            idArr.push(nextId);
          }
        }
        this.getDataInFloor({
          floorList,
          channelDetailIdList: idArr,
          pageIndex: 1,
          pageSize: this.pageSize,
          isTabClick: true,
          tabIndex: index
        });
      }
    },
    scrollToTab() {
      const channelContainerDOM = document.getElementById('channel-container');
      if (channelContainerDOM) {
        const h = this.isVerticalNav ? 0 : 40;
        const mScrollHeight =
          channelContainerDOM.getBoundingClientRect().top + h;
        window.scrollTo(0, mScrollHeight);
      }
    },
    // 顶部tab点击
    JumpTargetUrl(data) {
      // linkType 1：落地页，2：活动
      if (data.linkType == 2) {
        this.$router.push({
          path: 'brand',
          query: {
            activityNo: data.mshopLinkData // 活动id
          }
        });
      } else {
        goLink(data.mshopLinkData, (params, path) => {
          this.$router.push({
            path,
            query: {
              ...params,
              shopId: this.$route.query.shopId
            }
          });
        });
      }
    },
    // 优惠券===>立即抢券
    async grabbingCoupon(data, floorIndex) {
      console.log(this.floorList[floorIndex].hotSaleSp.spCardDetailList);
      this.$toast('领取成功！');
      Object.keys(
        this.floorList[floorIndex].hotSaleSp.spCardDetailList
      ).forEach(key => {
        this.floorList[floorIndex].hotSaleSp.spCardDetailList[key].forEach(
          it => {
            if (it.id == data.id) {
              it.status = 3;
            }
          }
        );
      });
    },
    // 跳商品详情
    goProductDetail(productObj) {
      this.$router.push({
        path: 'productDetail',
        query: {
          productId: productObj.productNo,
          shopId: getUrlParam().shopId,
          activityNo: productObj.activityNo
        }
      });
    },
    loadMore(data, key) {
      console.log(data, key);
      const { floorId, pageIndex } = data || {};
      this.getDataInFloor({
        floorList: [floorId],
        channelDetailIdList: [key],
        pageIndex,
        pageSize: this.pageSize
      });
    },
    onLoad() {
      if (this.floorList.length == 0 || this.isRequest) {
        this.loading = false;
        return;
      }
      // this.getFloorInfo();
    },
    formatArr(arr, num) {
      let newArr = new Array(Math.ceil(arr.length / num));
      for (let i = 0; i < newArr.length; i++) {
        newArr[i] = [];
      }
      for (let i = 0; i < arr.length; i++) {
        newArr[parseInt(i / num, 10)][i % num] = arr[i];
      }
      return newArr;
    },
    // 获取会场基本信息
    async getSuperBrandData() {
      try {
        const baseInfoRes = getSuperBrandInfo || {};
        const { message, code, data: baseInfo } = baseInfoRes || {};
        console.log(code, baseInfo);
        if (code === 200 && baseInfo) {
          // 楼层id列表， 以及配置基础信息
          const { floorList, hotSaleConfigRes } = baseInfo || {};
          // 楼层数组列表，按4个进行二维分组
          this.floorIdArr = this.formatArr(floorList, 4);
          let {
            title,
            kvImg,
            bgColor,
            bottomColor,
            leftHour,
            leftMinute,
            leftSecond
          } = hotSaleConfigRes || {};
          this.setPageTitle(title);

          this.hotSaleName = title || '';
          const endingTime = `${
            Number(leftHour) > 9 ? leftHour : '0' + leftHour
          }
          :${Number(leftMinute) > 9 ? leftMinute : '0' + leftMinute}
          :${Number(leftSecond) > 9 ? leftSecond : '0' + leftSecond}`;

          this.baseInfo = {
            kvImg: http2https(kvImg),
            bgColor,
            bottomColor: bottomColor,
            ruleDescB: hotSaleConfigRes.ruleDescB,
            ruleDescC: hotSaleConfigRes.ruleDescC,
            showCountDown: hotSaleConfigRes.countDownFlag == 1,
            countDownFlag: hotSaleConfigRes.countDownFlag,
            endingTime: endingTime
          };
          this.getFloorInfo();
        } else {
          this.$toast(message || '');
          this.finished = true;
          this.notData = true;
          this.loading = false;
        }
        this.isPageLoading = false;
      } catch (err) {
        this.$toast(err.message || '');
        this.isPageLoading = false;
        this.finished = true;
        this.notData = true;
        this.loading = false;
      }
    },
    // 根据楼层ids 加载楼层数据
    async getFloorInfo() {
      this.isRequest = true;
      /*const shopId = getUrlParam().shopId;
      const floorDataRes = await getSuperBrand(shopId, {
        hotSaleId: this.hotSaleId,
        floorList: this.floorIdArr[this.floorIndex],
        pageIndex: 1,
        pageSize: this.pageSize
      });*/
      const floorDataRes = floorData1 || {};
      const { code, data: floorData } = floorDataRes || {};
      this.loading = false;
      if (code === 200 && floorData) {
        floorData.forEach(item => {
          // 楼层类型 type 1:顶部导航 2:banner 3:直播 4:优惠券 5:资源位 6:活动模块 7:频道 8:猜你喜欢
          const {
            id: floorId,
            type,
            hotSaleNavList,
            hotSaleChannel,
            hotSaleResourceRes,
            hotSaleLive,
            hotSaleCampaign,
            hotSaleHighPopular,
            hotSaleBannerList,
            hotSaleSp
          } = item || {};
          if (type === 1) {
            this.NavTabdata = hotSaleNavList || [];
          } else if (type === 7) {
            let { showType: channelNavShowType, hotSaleChannelDetailList } =
              hotSaleChannel || {};
            // showType: 1:常规 2:左侧
            this.channelNavShowType = channelNavShowType;
            const channelList = hotSaleChannelDetailList || [];
            this.channelList = channelList.map(vItem => {
              vItem.floorId = floorId;
              return vItem;
            });
            item.floorImg = hotSaleChannel.floorImg || '';
            item.mshopLinkData = hotSaleChannel.mshopLinkData || '';
            this.handleChannelListData({ floorId, hotSaleChannelDetailList });
          } else if (type == 3) {
            item.floorImg = hotSaleLive.floorImg || '';
            item.mshopLinkData = hotSaleLive.mshopLinkData || '';
          } else if (type == 6) {
            item.floorImg = hotSaleCampaign.floorImg || '';
            item.mshopLinkData = hotSaleCampaign.mshopLinkData || '';
            item.seckillBaseInfo = {
              floorId: item.id,
              type: hotSaleCampaign.type,
              id: hotSaleCampaign.id,
              mshopLinkData: hotSaleCampaign.mshopLinkData,
              floorName: item.name,
              hotSaleName: this.hotSaleName
            };
          } else if (type == 5) {
            item.floorImg = hotSaleResourceRes.floorImg || '';
            item.mshopLinkData = hotSaleResourceRes.mshopLinkData || '';
          } else if (type == 9) {
            item.floorImg = hotSaleHighPopular.floorImg || '';
            item.mshopLinkData = hotSaleHighPopular.mshopLinkData || '';
          } else if (type == 2) {
            item.floorImg = hotSaleBannerList.floorImg || '';
            item.mshopLinkData = hotSaleBannerList.mshopLinkData || '';
          } else if (type == 4) {
            item.floorImg = hotSaleSp.floorImg || '';
            item.mshopLinkData = hotSaleSp.mshopLinkData || '';
          }
        });

        // 数据处理方式一
        // let arr = [...this.floorList, ...floorData];
        // console.log('arr===', arr);
        // this.floorList = arr.filter(v => v.type != 1);

        // 数据处理方式二
        const newList = floorData.filter(v => v.type != 1);
        this.floorList = newList;
        if (this.floorIndex === 0) {
          this.floorList = [].concat(floorData);
        } else {
          this.floorList = this.floorList.concat(floorData);
        }
        const floorIdLength = this.floorIdArr.length;
        if (floorIdLength > 0 && this.floorIndex < floorIdLength) {
          this.floorIndex += 1;
        } else {
          this.finished = true;
        }
        this.loading = false;
        this.isRequest = false;
      }
    },
    // 获取某个楼层中，加载更多的数据
    async getDataInFloor(params) {
      try {
        // eslint-disable-next-line no-unused-vars
        const { isTabClick = false, tabIndex, isScroll = false, ...rest } =
          params || {};
        // const shopId = getUrlParam().shopId;
        // const floorDataRes = await getSuperBrand(shopId, {
        //   ...rest,
        //   hotSaleId: this.hotSaleId
        // });
        const floorDataRes = {};
        const { data: floorData } = floorDataRes || {};
        if (floorData && floorData.length > 0) {
          floorData.forEach(item => {
            // 楼层类型 type 1:顶部导航 2:banner 3:直播间 4:优惠券 5:资源位 6:活动模块 7:活动模块 8:猜你喜欢
            const { id: floorId, type, hotSaleChannel, hotSaleCampaign } =
              item || {};
            // 频道
            if (type === 7) {
              let { hotSaleChannelDetailList } = hotSaleChannel || {};
              hotSaleChannelDetailList = hotSaleChannelDetailList || [];
              hotSaleChannelDetailList = hotSaleChannelDetailList.filter(
                vItem => params.channelDetailIdList.includes(vItem.id)
              );
              this.handleChannelListData({
                floorId,
                hotSaleChannelDetailList,
                isTabClick,
                tabIndex
              });
            } else if (type == 6) {
              // 活动
              this.floorList[
                this.seckillFloorIndex
              ].hotSaleCampaign.hotSaleCampaignTabList.forEach((it, index) => {
                if (it.id == this.seckillTabId) {
                  let productArr = [];
                  if (this.currenSeckillPageNum == 1) {
                    productArr =
                      hotSaleCampaign.hotSaleCampaignTabList[index]
                        .campaignProductList;
                  } else {
                    productArr = [
                      ...it.campaignProductList,
                      ...hotSaleCampaign.hotSaleCampaignTabList[index]
                        .campaignProductList
                    ];
                  }
                  it.campaignProductList = productArr;
                  it.hasNextPage =
                    hotSaleCampaign.hotSaleCampaignTabList[index].hasNextPage;
                  it.pageNum = this.currenSeckillPageNum;
                }
              });
              this.floorList = JSON.parse(JSON.stringify(this.floorList));
            }
          });
        } else if (isScroll) {
          this.listMap[params.channelDetailIdList[0]].scrollLoading = false;
        }
      } catch (err) {
        this.$toast(err.message || '');
        if (params.isScroll) {
          this.listMap[params.channelDetailIdList[0]].scrollLoading = false;
        }
      }
    },
    handleChannelListData(data) {
      let { isTabClick, tabIndex, floorId, hotSaleChannelDetailList } =
        data || {};
      hotSaleChannelDetailList = hotSaleChannelDetailList || [];
      // 处理频道下商品数据
      hotSaleChannelDetailList.forEach(item => {
        // channelType 1: 活动 2: 商品
        // showType 1: 一行一列 2: 一行两列 3: 一行三列
        const {
          channelType,
          showType,
          id,
          name,
          total,
          channelActivityList,
          channelProductList
        } = item;
        let { pageIndex, list: oldList } = this.listMap[id] || {};
        pageIndex = pageIndex || 1;
        let dataList = oldList || [];
        let list = [];
        if (channelType === 1) {
          list = channelActivityList || [];
        } else if (channelType === 2) {
          list = channelProductList || [];
        }
        dataList = pageIndex === 1 ? list : dataList.concat(list);
        // 是否有下一页
        const hasNext = dataList.length < total;
        if (hasNext && list.length > 0) {
          pageIndex += 1;
        }
        this.$set(this.listMap, id, {
          floorId,
          channelType,
          showType,
          name,
          total,
          hasNext,
          pageIndex,
          scrollLoading: false,
          list: dataList
        });
      });
      console.log('===', this.listMap);
      if (isTabClick) {
        this.$nextTick(() => {
          const scrollH = this.isVerticalNav ? 0 : 40;
          window.scrollTo(
            0,
            this.$refs.channelSectionRef[tabIndex].offsetTop - scrollH + 3
          );
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.count_down_warp {
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  .content {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: center;
    background: linear-gradient(
      139deg,
      rgba(255, 71, 55, 1) 0%,
      rgba(255, 199, 136, 1) 100%
    );
    border-radius: 4px;
    align-items: center;
    p {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
<style lang="scss">
.super-brand-channel-tab {
  //padding-top: 40px !important;
  z-index: 1000;
  .van-tabs__wrap {
    height: 40px !important;
  }
  .van-tab {
    line-height: 40px !important;
  }
  .van-tabs__line {
    left: 0;
    bottom: 0;
    position: absolute;
    height: 3px !important;
    border-radius: 1px !important;
    background-color: #ff1010 !important;
  }
  .van-tabs__nav--line {
    height: 100%;
    padding-bottom: 0;
    box-sizing: content-box;
  }
  .van-tab--active {
    color: #ff1010 !important;
  }
}
</style>
<style lang="scss" scoped>
.pt60 {
  padding-top: 60px;
}
.super_brand_warp {
  min-height: 100vh;
  padding-bottom: 80px;
  background-color: #f5f5f5;
  .kvImg_countDown {
    position: relative;
    .Strategy {
      height: 26px;
      width: auto;
      position: absolute;
      right: 0;
      top: 44px;
      z-index: 99;
    }
  }
  .kvImg {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .coupons {
    padding-top: 10px;
  }
  .super_brand——mt10 {
    margin-bottom: 10px;
  }
  #channel-container {
    margin-bottom: 10px;
  }
  .channel-container {
    margin-top: 10px;
  }
  .channel-title {
    padding: 15px 0;
    display: flex;
    justify-content: center;
    img {
      height: 32px;
      display: block;
    }

    p {
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(255, 16, 16, 1);
      line-height: 20px;
    }
  }
  .channel-more {
    &.mb {
      margin-bottom: 10px;
    }
    .btn {
      width: 120px;
      height: 24px;
      border: 1px solid #ff1010;
      font-size: 12px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: #ff1010;
      border-radius: 12px;
      margin: 0 auto;
      line-height: 24px;
      text-align: center;
    }
  }
  .channel-content-wrap {
    display: flex;
  }
  .pt40 {
    padding-top: 40px;
  }
  .channel-slide-w {
    width: 50px;
  }
  .slide-menu-container {
    width: 50px;
    max-height: 100vh;
    overflow: hidden;
    border-radius: 0 6px 6px 0;
  }
  .channel-list-wrap {
    flex: 1;
    padding: 0 10px 0 8px;
  }
  .channel-section {
    // padding-top: 10px;
  }
  .channel-list-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .channel-nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: top 0.3s ease;
  }
  .channel-nav-slide-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    z-index: 1000;
    transition: top 0.3s ease;
  }
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  .loading-content {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-right: 1px solid #c3cbd6;
    animation: mymove 1s linear infinite;
    -webkit-animation: mymove 1s linear infinite;
  }
}
@keyframes mymove {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
